<!-- 注册 -->
<template>
  <div class="car_registered">
    <!-- logo -->
    <img :src="logo" alt="">

    <van-cell-group>

      <!-- 手机号 -->
      <van-field
        v-model="userPhone"
        label="手机号"
        placeholder="请输入手机号码"
        @focus="getNumKeyboard"
      >
        <van-button type="default" slot="button" size="small" @click="getMessageCode">{{ codeText }}</van-button>
      </van-field>

      <!-- 短信验证码 -->
      <van-field
        v-model="code"
        label="验证码"
        placeholder="请输入短信验证码"
        @focus="getCodeKeyboard"
      />

      <!-- 设置密码 -->
      <van-field
        class="defaultCode"
        v-model="userPassWord"
        :type="rightIconShow ? 'password' : 'text'"
        label="密码"
        placeholder="6-12位密码"
        @click-right-icon="rigthIcon"
      >
        <i slot="right-icon" class="icon-no-see" v-if="!rightIconShow"/>
        <i slot="right-icon" class="icon-see" v-else-if="rightIconShow"/>
      </van-field>
    </van-cell-group>

    <!-- 提交按钮 -->
    <button class="loginUsre" @click="quickRegistered">快速注册</button>

    <div class="buttonList flex_layout flex_horizontal_left_around">
      <router-link to="/login">登录</router-link>
    </div>

    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="numShow"
      extra-key="."
      close-button-text="完成"
      @blur="numShow = false"
      @input="numInput"
      @delete="numDelete"
    />

  </div>
</template>

<script>
import Vue from 'vue';
import { Field, CellGroup, NumberKeyboard, Button } from 'vant';
import logo from '@/assets/logo.png';
import { validatenull, isMobile } from '@/utils/validate';
import { errorToast } from '@/utils/toast';
import { errorDialogs } from "@/utils/errorHttp";

Vue.use(Field).use(CellGroup).use(NumberKeyboard).use(Button);

export default {
  name: 'carRegistered',
  data() {
    return {
      logo: logo,
      userPhone: '13716055457',    //用户手机号
      userPassWord: '1234',   //用户密码
      numShow:false,       //数字键盘
      rightIconShow:true,
      codeText:"获取验证码",
      secound:60,
      againCode: true,
      code:"",
      inputType:1
    }
  },
  
  methods: {
    //数字键盘
    getNumKeyboard() {
      document.activeElement.blur();
      this.numShow = true;
      this.inputType = 1;
    },
    getCodeKeyboard(){
      document.activeElement.blur();
      this.numShow = true;
      this.inputType = 2;
    },
    numInput(value) {
      this.inputType == 1 ?
        this.userPhone += value :
        this.code += value;
    },
    numDelete() {
      if(this.inputType == 1){
        this.userPhone = this.userPhone.length ?
          this.userPhone.substring(0,this.userPhone.length - 1) : ""
      }else if(this.inputType == 2){
        this.code = this.code.length ?
          this.code.substring(0,this.code.length - 1) : ""
      }
    },
    // 注册
    quickRegistered(){
      if(validatenull(this.userPhone)){
        errorToast("手机号不能为空")
      }else if(validatenull(this.code)){
        errorToast("短信验证码不能为空")
      }else if(validatenull(this.userPassWord)) {
        errorToast("密码不能为空")
      }else if(!validatenull(this.userPhone) && !isMobile(this.userPhone)) {
        errorToast("手机号格式不正确")
      }else{
        // 请求数据
        // this.$store.dispatch("userphoneLogin",{phone:this.userPhone,password:this.userPassWord});
        // Toast({
        //   message:"登陆成功",
        //   type: "success",
        //   duration: 2000
        // })
        errorDialogs("手机号码已经被注册");
      }
    },
    // 是否显示密码
    rigthIcon() {
      this.rightIconShow = !this.rightIconShow;
    },
    // 获取短信验证码
    getMessageCode(){
      if(validatenull(this.userPhone) && this.againCode){
        errorToast("手机号不能为空")
      }else if(!validatenull(this.userPhone) && !isMobile(this.userPhone) && this.againCode) {
        errorToast("手机号格式不正确")
      }else{
        this.againCode ? this.secoundTime() : ""
      }
    },
    // 秒数计时
    secoundTime(){
      let that = this;
      that.againCode = false;
      that.codeText = `${that.secound}s 后重新获取`;
      setInterval(function(){
        that.secound--;
        if(that.secound == 0){
          clearInterval(that.secound);
          that.codeText = "获取验证码"
          that.againCode = true;
        }else{
          that.codeText = `${that.secound}s 后重新获取`;
        }
      },1000);
    }
  }
}
</script>

<style scoped lang="scss">
.car_registered {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.52rem .5rem 0 .5rem;
  img {
    width: 1rem;
    height: 1rem;
    margin-bottom: 1.52rem;
  }
  .loginUsre{
    width: 100%;
    height: .8rem;
    background: #FF9900;
    color: #fff;
    font-size: 14px;
    border-radius: .1rem;
    border: none;
    outline: medium;
    letter-spacing: .2rem;
    margin-top: 1.2rem;
  }
  .van-cell-group{
    width: 100%;
    .van-cell{
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #f1f2f3;
      .van-button{
        border: none;
        outline: medium;
        color: #666666;
      }
    }
  }
  [class*=van-hairline]::after{
    border: none;
  }
  .buttonList {
    width: 60%;
    height: auto;
    margin: 0 auto;
    position: fixed;
    bottom: .5rem;
    z-index: 100;
    a{
      font-size: .28rem;
      color: #999999;
    }
  }
  .defaultCode .van-field__right-icon{
    line-height: .2rem!important;
  }
}

</style>
